{extend name="index/layout" /}


{block name="content"}
    <!-- 搜索标题 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h1 class="text-2xl font-bold text-primary mb-2">搜索結果：{$keyword}</h1>
        <p class="text-gray-600">找到 {$total} 個與「{$keyword}」相關的桌布</p>
        
        <!-- 类型过滤 -->
        <div class="flex items-center mt-4 space-x-4">
            <a href="/search?keyword={$keyword|rawurlencode}" class="inline-flex items-center px-3 py-1 rounded-full {empty name='type'}bg-primary text-white{else/}bg-gray-200 text-gray-700 hover:bg-gray-300{/empty}">
                <i class="fas fa-th-large mr-2"></i> 全部
            </a>
            <a href="/search?keyword={$keyword|rawurlencode}&type=desktop" class="inline-flex items-center px-3 py-1 rounded-full {eq name='type' value='desktop'}bg-primary text-white{else/}bg-gray-200 text-gray-700 hover:bg-gray-300{/eq}">
                <i class="fas fa-desktop mr-2"></i> 電腦桌布
            </a>
            <a href="/search?keyword={$keyword|rawurlencode}&type=mobile" class="inline-flex items-center px-3 py-1 rounded-full {eq name='type' value='mobile'}bg-accent text-white{else/}bg-gray-200 text-gray-700 hover:bg-gray-300{/eq}">
                <i class="fas fa-mobile-alt mr-2"></i> 手機桌布
            </a>
        </div>
    </div>
    
    <!-- 搜索结果 -->
    {if condition="!empty($wallpapers)"}
    <div class="{eq name='type' value='mobile'}grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4{else/}grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6{/eq} mb-8">
        {volist name="wallpapers" id="wallpaper"}
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover-card">
            <a href="/category/{:$wallpaper.type == 'mobile' ? rawurlencode('手機桌布') : rawurlencode('電腦桌布')}/{$wallpaper.category_name|rawurlencode}/{$wallpaper.title|rawurlencode}">
                <div class="relative {eq name='$wallpaper.type' value='desktop'}desktop-card{else/}mobile-card{/eq} bg-gray-200">
                    <img src="{$wallpaper.show_file_path}" alt="{$wallpaper.title}" class="w-full h-full object-cover lazy" loading="lazy">
                    <div class="absolute top-0 right-0 bg-{eq name='$wallpaper.type' value='desktop'}primary{else/}accent{/eq} text-white px-2 py-1 text-xs rounded-bl-md">
                        <i class="fas fa-{eq name='$wallpaper.type' value='desktop'}desktop{else/}mobile-alt{/eq} mr-1"></i> {eq name='$wallpaper.type' value='desktop'}電腦{else/}手機{/eq}
                    </div>
                    <div class="absolute bottom-0 left-0 bg-secondary bg-opacity-80 text-white px-2 py-1 text-xs">
                        <a href="/category/{:$wallpaper.type == 'mobile' ? rawurlencode('手機桌布') : rawurlencode('電腦桌布')}/{$wallpaper.category_name|rawurlencode}">{$wallpaper.category_name}</a>
                    </div>
                </div>
                <div class="p-{eq name='$wallpaper.type' value='desktop'}4{else/}3{/eq}">
                    <h3 class="text-{eq name='$wallpaper.type' value='desktop'}lg{else/}sm{/eq} font-bold mb-{eq name='$wallpaper.type' value='desktop'}2{else/}1{/eq} text-primary truncate">{$wallpaper.title}</h3>
                    <div class="flex flex-wrap gap-1 tag-cloud">
                        {volist name="wallpaper.tags" id="tag" length="3"}
                        {if $tag != ''}
                        <span class="text-xs">{$tag}</span>
                        {/if}
                        {/volist}
                    </div>
                </div>
            </a>
        </div>
        {/volist}
    </div>
    
    <!-- 分页 -->
    <div>
        {$page}
    </div>
    {else /}
    <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <i class="fas fa-search text-6xl empty-state-icon mb-4"></i>
        <h3 class="text-xl font-bold text-gray-700 mb-2">未找到相關桌布</h3>
        <p class="text-gray-500">沒有找到與「{$keyword}」相關的桌布，請嘗試其他關鍵詞</p>
        <a href="{:url('index/index')}" class="inline-block mt-6 bg-primary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
            返回首頁
        </a>
    </div>
    {/if}
{/block} 